<template>
  <div class="app-container">
    <el-card>
      <div class="ma__b__15">
        <el-button
          type="success"
          :icon="Plus"
          @click="showAddCompanyDialog({ isEdit: false, row: null })"
          >新增</el-button
        >
        <el-button type="danger" :icon="Delete" @click="delRowAll"
          >批量删除</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        show-overflow-tooltip
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="companyId" label="ID" width="80" />
        <el-table-column prop="name" label="企业名称" />
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="props">
            <div>
              <el-button
                type="primary"
                :icon="Edit"
                @click="showAddCompanyDialog({ isEdit: true, row: props.row })"
                >编辑</el-button
              >
              <el-button
                type="danger"
                :icon="Delete"
                @click="delRow(props.row.companyId)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="count > 0"
        v-model:total="count"
        v-model:page="pageInfo.page"
        v-model:limit="pageInfo.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <AddCompanyDialog
      ref="addCompanyDialogRef"
      @success="addCompanyDialogSuccess"
    />
  </div>
</template>

<script lang="ts" setup name="CompanyManager">
defineOptions({
  name: "CompanyManager",
  inheritAttrs: false,
});
import { getCompanyList, deleteCompany } from "@/api/company/index";
import { type ICompany } from "@/api/types";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import AddCompanyDialog from "./components/AddCompanyDialog.vue";

const tableData = ref<ICompany[]>([]);
const loading = ref<boolean>(false);
const count = ref<number>(0);
const pageInfo = ref<PageInfoType>({
  page: 1,
  limit: 10,
});
// 获取企业列表
const getCompanyListService = async () => {
  let params = {
    ...pageInfo.value,
  };
  loading.value = true;
  let res = await getCompanyList(params);
  loading.value = false;
  if (res) {
    console.log("获取企业列表成功  ", res);
    count.value = res.data.count;
    tableData.value = [...res.data.list];
  }
};

getCompanyListService();

// 分页触发函数
const handleQuery = () => {
  getCompanyListService();
};

const addCompanyDialogRef = ref<typeof AddCompanyDialog | null>(null);

// 弹窗确认
const addCompanyDialogSuccess = () => {
  getCompanyListService();
};

// 打开弹窗
const showAddCompanyDialog = (data: { isEdit: boolean; row: any | null }) => {
  if (!addCompanyDialogRef.value) return;
  addCompanyDialogRef.value.handleOpen(data);
};

// 删除表格行
const delRow = (id: string | number) => {
  ElMessageBox.confirm("您确定要删除该企业吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteCompanyService(id);
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};

// 批量删除
const delRowAll = () => {
  if (!multipleSelection.value.length) {
    ElMessage({
      message: "请选择需要删除的企业",
      type: "error",
    });
    return;
  }
  ElMessageBox.confirm("您确定要删除选中的企业吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let ids = multipleSelection.value
        .map((company: ICompany) => {
          return company.companyId;
        })
        .join(",");
      deleteCompanyService(ids);
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};

// 调用删除接口
const deleteCompanyService = async (ids: string | number) => {
  let data = {};
  let res = await deleteCompany(ids, data);
  if (res) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getCompanyListService();
  }
};

// 表格多选
const multipleSelection = ref<ICompany[]>([]);
const handleSelectionChange = (val: ICompany[]) => {
  multipleSelection.value = val;
};
</script>

<style lang="scss" scoped>
.app-container {
}
</style>
